import { inject , observer} from 'mobx-react'
import { Component } from 'react';

@inject("store")
@observer
class App extends Component {
  render() {
    let { status, isPicking, buttonText, pickApple , apples, eatApple } = this.props.store;
    // let {
    //   appleNow: {quantity:notEatenQuantity,weight:notEatenWeight},
    //   appleEaten: {quantity:EatenQuantity,weight:EatenWeight}
    // } = status;
    return (
      <div className="appleBusket">
        <div className="title">苹果篮子</div>
        <div className="stats">
            <div className="section">
              <div className="head">当前</div>
              <div className="content">{ status.appleNow.quantity }个苹果，{ status.appleNow.weight }克
              </div>
            </div>
            <div className="section">
              <div className="head">已吃掉</div>
              <div className="content">{ status.appleEaten.quantity }个苹果，{ status.appleEaten.weight }克</div>
            </div>
        </div>
        <div className="appleList">
          {
            apples.filter(apple => apple.isEaten === false)
              .map( apple => {
              return (
                <div className="appleItem" key={apple.id}>
                  <div className="apple"><img src={require('./images/apple.png')} alt=""/></div>
                  <div className="info">
                    <div className="name">红苹果 -{ apple.id }号</div>
                    <div className="weight">{ apple.weight }克</div>
                  </div>
                  <div className="btn-div">
                    <button onClick={ () => eatApple(apple.id) }> 吃掉 </button>
                  </div>
                </div>
              )
            })
          }
        </div>
        <div className="btn-div">
            <button  className={isPicking ? 'disabled' : ''}  onClick={() => pickApple() } >{buttonText}</button>
        </div>
    </div>
    );
  }  
}

export default App;
